<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增bug')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-bug-add">

            <div class="form-group">
                <label class="col-sm-3 control-label"><font color="red">*</font>&nbsp;bug出处：</label>
                <div class="col-sm-8">
                    <input name="bugPlace" required class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">版本号：</label>
                <div class="col-sm-8">
                    <input name="version" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">截图：</label>
                <div class="col-sm-8">
                    <input name="imgs"  id="imgs" class="form-control" type="hidden">
                    <button id="uploadBtn"  type="button" class="btn btn-sm btn-primary" style="display: inline-block; width: 95px;position: relative;float: left;height: 30px;"><i class="fa fa-upload"></i>上传图片</button>&nbsp;
                </div>
            </div>

            <div class="row form-group">
                <div class="col-xs-12" style="padding-left: 20px;">
                    <div class="col-xs-offset-2 col-xs-10" style="padding-left: 0px;">
                        <ul class="row" id="imgList" style="padding-left: 0px;list-style: none;margin-left:0px;">
                        </ul>
                        <div style="clear:both;"></div>
                    </div>
                </div>
            </div>
            <div class="form-group" style="margin-top: -14px;">
                <label class="col-sm-3 control-label">描述：</label>
                <div class="col-sm-8">
                    <textarea name="description" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"><font color="red">*</font>&nbsp;详情：</label>
                <div class="col-sm-8">
                    <script id="editor" name="detail" type="text/plain" ></script>
                </div>
            </div>


        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: ueditor" />
    <script th:src="@{/ajax/libs/plupload/plupload.full.min.js}"></script>
    <script type="text/javascript">
        var imgIds="";
        var btns = new Array("uploadBtn");
        $.each(btns,function(i,n) {
            var self = this.toString();
            var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
                runtimes: 'html5,silverlight,html4,flash',
                browse_button: self,
                url: ctx + "common/upload?attachment=1",
                flash_swf_url: ctx+"ajax/libs/plupload/Moxie.swf",
                silverlight_xap_url: ctx+"ajax/libs/plupload/Moxie.xap",
                filters: {
                    max_file_size: '4mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
                    mime_types: [
                        { title : "图片文件", extensions:"jpg,jpeg,gif,png,bmp" }
                    ]
                }
            });
            uploader.bind('FilesAdded', function (uploader, files) {
                var num=$('#imgList').children('li').length;
                if(num==5){
                    Fast.msg_error("最多上传5张截图！");
                    return;
                }
                uploader.start();
                layer.load();
            });
            uploader.bind('Error', function (up, err) {
                alert(err.message);
            });
            uploader.bind("FileUploaded", function (up, file, res) {
                var json = res.response;
                json = JSON.parse(json);
                if (json.code != 0 && json.code != '0') {
                    $.modal.alertError(json.msg);
                    return;
                }
                uploadCallback(json);
            })
            window.onload = function () {
                uploader.init(); //初始化
            };

            function uploadCallback(json) {
                layer.closeAll();
                var html="";
                if(self=='uploadBtn'){
                    html+='<li class="col-xs-1" style="padding-left: 0px;padding-right: 10px;margin-bottom: 10px;margin-right: 40px;">';
                    html+=' <a target="_blank" href="'+json.url+'"> <img style="width:140px;height: 140px;border-radius: 4px;" src="'+json.url+'"></a>';
                    html+=' <a href="javascript:;" data-id="'+json.id+'" onclick="deleteImg(this)" style="display: block;margin-top:10px;width: 140px;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>';
                    html+='</li>';
                    $("#imgList").append(html);
                    imgIds+=json.id+",";
                    $("#imgs").val(imgIds);

                }
            }
        });

        function deleteImg(obj){
            var id=$(obj).data("id");
            $.ajax({
                type: "post",
                url:ctx+"common/upload/delete",
                dataType: "json",
                data:{id:id},
                beforeSend:function(){
                    layer.load("正在加载，请稍后...");
                },
                success:function(json){
                    layer.closeAll('loading');
                    if(json.code==0||json.code=='0'){
                        $(obj).parent().remove();
                        var imgIds=$("#imgs").val();
                        imgIds=imgIds.replaceAll(id+",","");
                        $("#imgs").val(imgIds);
                    }
                }
            });
        }
    </script>
    <script type="text/javascript">
        var ue = UE.getEditor('editor');
        function getContent() {
            return UE.getEditor('editor').getContent();
        }
        function getContentTxt() {
            return UE.getEditor('editor').getContentTxt();
        }
    </script>
    <script th:inline="javascript">
        var prefix = ctx + "system/bug"
        $("#form-bug-add").validate({
            focusCleanup: true
        });
        $(function() {
            $("#editor").css("height", "380px");
        });
        function submitHandler() {
            if ($.validate.form()) {
                var c = getContentTxt();
                if (isEmpty(c)) {
                    Fast.msg_error("请输入bug详情！");
                    return;
                }
                $.operate.save(prefix + "/add", $('#form-bug-add').serialize());
            }
        }

    </script>
</body>
</html>
